<template>
<div id="wrap">
  <swiper loop auto :list="demo06_list" :index="demo06_index" @on-index-change="demo06_onIndexChange"></swiper>
  <swiper loop auto height="30px" direction="vertical" :interval=2000 class="text-scroll" :show-dots="false">
    <swiper-item><p>博羸兄弟----博羸兄弟读书会</p></swiper-item>
    <swiper-item><p>博羸兄弟----飞雷开源项目</p></swiper-item>
    <swiper-item><p>博羸兄弟----不忘初心</p></swiper-item>
  </swiper>
  <div id="activity" class="content-block content " style="background-color:#fbf9fe;top:206px">
    <scroller ref="activityScroller" style=""
      :on-refresh="refreshActivity"
      :on-infinite="infiniteActivity">
      <!-- content goes here -->
      <div v-for="cate in actgroup_cates">
        <group style="margin-top: -.77em;">
          <router-link :to="{ path: '/activity/GroupViews', query: { id: cate.id }}">
            <cell style="font-size: 12px;" is-link value="更多" >
              <span slot="title" style="color:rgb(216, 65, 65)"><span style="vertical-align:middle;">{{ cate.categoryName }}</span></span>
            </cell>
          </router-link>
        </group>
        <grid :cols="cols" style="padding-top: 5px;">
          <grid-item v-for="group in cate.groupList" :key="group.id">
            <div class="groups-category">
              <img :src="group.groupLogo" style="height:128px;width: 100%;">
              <div class="activity-info">
                <router-link class='m-bar' :to="{ path: '/activity/groupIntro', query: { id: group.id }}">{{ group.groupName }}</router-link>
              </div>
            </div>
          </grid-item>
        </grid>
      </div>
    </scroller>
    </div>
    <flyray-tabbar></flyray-tabbar>
</div>
</template>

<script>
import FlyrayTabbar from '@/components/FlyrayTabbar'
import { Swiper, GroupTitle, SwiperItem, XButton, Divider, Grid, GridItem, Cell, Group } from 'vux'
import { getCustomerId } from '../utils/utils'
import { getAuthInfo } from '../utils/common'

export default {
  components: {
    Swiper,
    SwiperItem,
    GroupTitle,
    XButton,
    Divider,
    Grid,
    GridItem,
    Cell,
    Group,
    FlyrayTabbar
  },
  data () {
    return {
      demo06_list: [],
      demo06_index: 0,
      cols: 2,
      swiperItemIndex: 1,
      actgroup_cates: [],
      currentPage: '0',
      noData: '',
      customerid: getCustomerId()
    }
  },
  created: function () {
    getAuthInfo('home')
  },
  mounted: function () {
    this.top = 1
    this.bottom = 5
    let config = {
      headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json'},
      data: {
        'customerId': this.customerid
      },
      method: 'post'
    }
    var that = this
    this.$ajax('api/cms/activity/queryHotActivity', config).then(function (response) {
      console.log('加载推荐活动')
      var actdata = response.data.data.activities
      console.log(actdata)
      for (var i = 0; i < actdata.length; i++) {
        var activity = {url: '/activity/activityDetail?id=' + actdata[i].id, img: actdata[i].activityLogo, title: actdata[i].activityName}
        that.demo06_list.push(activity)
      }
    }).catch(function (error) {
      console.log(error)
    })
  },
  methods: {
    refreshActivity: function (done) {
      console.log('下拉刷新活动数据')
      console.log('refreshActivity')
      var self = this
      this.noData = true
      setTimeout(() => {
        self.actgroup_cates = []
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': self.customerid,
            'currentPage': '0',
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/activity/query', config).then(function (response) {
          console.log('下拉刷新活动数据')
          console.log(response)
          console.log(response.data.data.length)
          console.log(response.data.pagination.currentPage)
          self.currentPage = response.data.pagination.currentPage + 1
          var catedata = response.data.data.groupCategories
          self.actgroup_cates = catedata
        }).catch(function (error) {
          console.log(error)
        })
        done()
      }, 500)
    },
    infiniteActivity: function (done) {
      console.log('上拉加载活动数据')
      console.log('infiniteActivity')
      var self = this
      if (this.noData) {
        console.log(this.noData)
        this.noData = false
        self.$refs.activityScroller.finishInfinite(true)
        return
      }
      setTimeout(() => {
        let config = {
          headers: {'X-Requested-With': 'XMLHttpRequest', 'Content-Type': 'application/json', 'Accept': 'application/json'},
          data: {
            'customerId': self.customerid,
            'currentPage': self.currentPage,
            'pageSize': '10'
          },
          responseType: 'json',
          method: 'post'
        }
        self.$ajax('api/cms/activity/query', config).then(function (response) {
          console.log(response)
          console.log(response.data.code)
          var code = response.data.code
          self.currentPage = response.data.pagination.currentPage + 1
          if (code === '01') {
            self.noData = '没有更多数据'
            self.$refs.activityScroller.finishInfinite(true)
            return
          }
          var catedata = response.data.data.groupCategories
          var start = catedata.length
          for (var i = 0; i < start; i++) {
            self.actgroup_cates.push(catedata[i])
          }
          self.bottom = self.bottom + 10
          done()
        }).catch(function (error) {
          console.log(error)
        })
      }, 500)
    },
    onSwiperItemIndexChange (index) {
      console.log('demo item change', index)
    },
    demo01_onIndexChange (index) {
      this.demo01_index = index
    },
    demo05_onIndexChange (index) {
      this.demo05_index = index
    },
    demo06_onIndexChange (index) {
      this.demo06_index = index
    },
    demo07_onIndexChange (index) {
      this.demo07_index = index
    }
  }
}
</script>

<style scoped>

.weui-grid {
    position: relative;
    float: left;
    padding: 5px !important;
    width: 50%;
    box-sizing: border-box;
}

.groups-category{
    text-align: center;
    background-position: center;
    height: 128px;
    line-height: 128px;
    color: #10c5b6;
    background-attachment: fixed;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    -moz-background-size: 100% 100%;
}

.activity-logo{
  height:128px;
  width:128px;
}
.activity-info{
  text-align:center;
  background-position: center;
  line-height:128px;
  color: #10c5b6;
  position:absolute; 
  z-index:2; 
  left:5px; 
  top:5px;
  height: 128px;
  width: 100%;
}
.m-bar{
  color: #ff6769;
  border-color: #ff6769;
  border-radius: 4px;
  border: 1px solid;
  padding: 5px 20px 5px 20px;
}
.copyright {
  font-size: 12px;
  color: #ccc;
  text-align: center;
}
.text-scroll {
  border: 1px solid #ddd;
  border-left: none;
  border-right: none;
}
.text-scroll p{
  font-size: 12px;
  text-align: center;
  line-height: 30px;
}
.black {
  background-color: #000;
}
.title{
  line-height: 100px;
  text-align: center;
  color: #fff;
}
.animated {
  animation-duration: 1s;
  animation-fill-mode: both;
}
.vux-indicator.custom-bottom {
  bottom: 30px;
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate3d(0, 100%, 0);
  }
  100% {
    opacity: 1;
    transform: none;
  }
}
.fadeInUp {
  animation-name: fadeInUp;
}
.swiper-demo-img img {
  width: 100%;
}

</style>
